<template>
  <!-- 书写html结构 -->
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="洗车日历"
      left-text="返回"
      left-arrow
      @click-left="jump('/')" />

    <van-row style="height: 160px; background-color: rgb(87, 196, 246)">
      <van-col span="24">
        <van-row style="height: 70px; margin-top: 20px; line-height: 50px">
          <van-col span="2"></van-col>
          <van-col span="4" style="text-align: top">
            <van-image
              round
              width="4rem"
              height="4rem"
              :src="userxinxi.avatar" />
          </van-col>
          <van-col span="2"></van-col>
          <van-col span="16" style="text-align: left">{{
            userxinxi.mobile
          }}</van-col>
        </van-row>
      </van-col>

      <van-row style="height: 70px">
        <van-col span="8">{{ userxinxi.cjtime }}天 <br />加入TT</van-col>

        <van-col span="8">{{ userxinxi.storeNum }}个 <br />服务门店</van-col>

        <van-col span="8"
          >{{ userxinxi.serviceNum }}次 <br />服务次数</van-col
        >
      </van-row>
    </van-row>

    <!-- 日历 -->
    <van-calendar
      title="日历"
      :min-date="minDate"
      :max-date="maxDate"
      :poppable="false"
      :show-confirm="false"
      :style="{ height: '400px' }"
      @confirm="onDateSelect" />

    <hr style="width: 96%; margin-left: 1px" />
    <p
      style="
        text-align: left;
        font-size: 16px;
        font-weight: bold;
        margin-left: 20px;
      ">
      洗车记录
    </p>
    <van-row v-for="item in order" style="margin-left: 18px">
      <div
        style="
          font-size: 16px;
          font-weight: bold;
          text-align: left;
          margin-left: 1px;
        ">
        订单编号: {{ item.detailId }}
      </div>
      <div class="oredr">店铺名称: {{ item.storeName }}</div>
      <div class="oredr">洗车机: {{ item.stationName }}</div>
      <div class="oredr">洗车时间: {{ item.timeDifference }} 分钟</div>
      <div class="oredr">
        洗车金额: ￥{{ item.expenditure }}
        <span class="pingjiaa" v-if="item.goodid == '0'" @click="CommentB"
          >已评价</span
        >
        <span
          class="pingjiab"
          v-if="item.goodid == '1'"
          @click="Comment(item.checkoutId, item.storeId)"
          >去评价</span
        >
      </div>
      <div style="height: 6px"></div>
      <hr style="width: 96%; margin-left: 1px" />
    </van-row>
  </div>
</template>

<script>
import moment from "moment";
import { Toast } from "vant";

//书写组件配置项目 相当于写js代码的地方
//要求template必须有且只有一个根元素，如果有两个就不知道绑定那个
export default {
  //export default 相当于过去的new vue ({el:"#div"})
  //全部都是json格式

  props: {
    //注册属性，用来父子组件传递参数使用
  },
  data() {
    //定义数据的地方
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(),
      selectedDate: "",
      show: true,
      userxinxi: {}, //个人信息
      userId: "", //用户id
      order: [], //订单信息
    };
  },
  created: function () {
    let date = new Date();
    //获取今天的日期
    this.selectedDate =
      date.getFullYear() +
      "-" +
      (date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1) +
      "-" +
      (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());

    this.selectByToken(); //获取用户id
  },
  methods: {
    //根据token查询当前登录用户信息
    selectByToken() {
      var _this = this;
      console.log("根据token查询当前登录用户信息。。。。。");
      this.$http
        .get("/tuser/queryBy")
        .then(function (response) {
          console.log(JSON.stringify(response));
          if (response.data.code == 200) {
            _this.userId = response.data.data.id; //获取用户id
            _this.settlement(); //获取个人信息
            _this.queryOrder(); //获取订单信息
          }
        })
        .catch(function (error) {
          _this.$toast("获取用户id出错。。。");
        });
    },
    //获取个人信息
    settlement() {
      var _this = this;
      this.$http
        .get("/tuser/queryUserWash?userId=" + this.userId)
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            _this.userxinxi = response.data.data;

            // 将日期字符串转换为Date对象 求连个时间之间的差
            const dateArr = _this.userxinxi.cjtime.match(/\d+/g);
            const year = Number(dateArr[0]);
            const month = Number(dateArr[1]) - 1; // 月份需要减1，因为JavaScript中月份是从0开始的
            const day = Number(dateArr[2]);
            const hour = Number(dateArr[3]);
            const minute = Number(dateArr[4]);
            const date = new Date(year, month, day, hour, minute);
            const startMoment = moment(date, "YYYY-MM-DD HH:mm:ss");
            const endMoment = moment(new Date(), "YYYY-MM-DD HH:mm:ss");
            const diffMinutes = endMoment.diff(startMoment, "days");
            _this.userxinxi.cjtime = diffMinutes;

            let a = _this.userxinxi.mobile.substring(0, 3);
            let b = _this.userxinxi.mobile.substring(3, 7);
            let c = _this.userxinxi.mobile.substring(7, 12);
            _this.userxinxi.mobile = a + "***" + c;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //获取订单信息
    queryOrder() {
      var _this = this;
      this.$http
        .get(
          "/checkoutInfo/queryOrder?date=" +
            this.selectedDate +
            "&userId=" +
            this.userId
        )
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            _this.order = response.data.data;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    // 获取日历的年月日
    onDateSelect(date) {
      this.selectedDate =
        date.getFullYear() +
        "-" +
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) +
        "-" +
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
      this.queryOrder(); //获取订单信息
    },
    CommentB() {
      Toast("您已经评价过了,请不要重复评价");
    },
    //跳转去评价
    Comment(checkoutId, storeId) {
      this.$router.push({
        name: "Comment",
        query: {
          storeId: storeId,
          goodsId: checkoutId,
        },
      });
    },
    //  方法事件处理
    jump(uri) {
      this.$router.push(uri);
    },
  },
};
</script>

<style scoped>
.oredr {
  text-align: left;
  margin-left: 1px;
  margin-top: 6px;
  margin-bottom: 6px;
}
.pingjiaa {
  border: 5px solid #989898;
  color: white;
  background: #989898;
  margin-left: 180px;
  border-radius: 3px;
}
.pingjiab {
  border: 5px solid #39a9ed;
  background: #39a9ed;
  color: white;
  margin-left: 180px;
  border-radius: 3px;
}
</style>
